<template>
    <div class="container">
      <div style="width: 380px; padding: 50px 30px; background-color: rgba(255,255,255,.8); border-radius: 5px;">
        <div style="text-align: center; font-size: 24px; margin-bottom: 30px; color: #333">欢迎注册</div>
        <el-form :model="form" :rules="rules" ref="formRef"> 
          <el-form-item prop="username">
            <el-input size="medium" prefix-icon="el-icon-user" placeholder="请输入账号" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input size="medium" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPass">
            <el-input size="medium" prefix-icon="el-icon-lock" placeholder="请确认密码" show-password v-model="form.confirmPass"></el-input>
          </el-form-item>
          <el-form-item>
          <el-button size="medium" style="width: 100%; background-color: #2a60c9; border-color: #2a60c9; color: white" @click="register">注册</el-button>
          </el-form-item>
          <div style="display: flex; align-items: center">
            <div style="flex: 1"></div>
            <div style="flex: 1; text-align: right">
              已有账号？请  <router-link to="/login">登录</router-link>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </template>
<script>
import axios from 'axios';
    export default {
        name: 'Register',
        data(){
          //校验
          const validatePassword = (rule, confirmPass, callback) => {
            if (confirmPass === ''){
              callback(new Error ('请确认密码'));
            }else if (confirmPass !== this.form.password){
              callback(new Error ('两次输入的密码不一致'));
            }else{
              callback();
            }
          }
            return {
                form: { role: 'USER' },
                rules: {
                    username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    confirmPass: [
                    { validator: validatePassword, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            register(){
              this.ref.formRef.validate((valid) => {
                if (valid){
                  axios.post('/register', this.form).then(res => {
                    if (res.code === '200')
                    {
                      this.$router.push('/login');
                      this.$message.success('注册成功');
                    }
                    else{
                      this.$message.error(res.msg)
                    }
                  })
                }
              })
            }
        }
    }
</script>
<style scoped>

.container {
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/images/bg1.jpg");
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
a {
  color: #2a60c9;
}
</style>